<script setup lang="ts">

//使用选项式式定义pinia
import {useCounterStore} from "@/common/option_store.ts";

const counter = useCounterStore();
//使用组合式定义pinia
import {useUserStore} from '@/common/setup_store.ts'
import {storeToRefs} from "pinia";

const userStore = useUserStore();

function add() {
  userStore.increment();//调用方法
  // userStore.$patch({count:userStore.count + 1});//直接设置属性值
}


// 从 Store 解构
//为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()
const {count, doubleCount} = storeToRefs(userStore);

</script>

<template>
  <el-card class="mb-4">
    <template #header>选项式</template>
    <el-button type="danger" @click="counter.increment()">点击 {{ counter.count }}</el-button>
  </el-card>

  <el-card class="mb-4">
    <template #header>组合式</template>
    <p>点击数: {{ userStore.count }}</p>
    <el-button type="success" @click="add">点击</el-button>
  </el-card>

  <el-card>
    <template #header>从 Store 解构</template>
    <p>count:{{ count }}</p>
    <p>double :{{ doubleCount }}</p>
    <el-button type="warning" @click="add">点击</el-button>

  </el-card>
</template>

<style scoped>

</style>